<template>
	<view class="container">
		<uni-row>
			<uni-col :span="21">
				<uni-search-bar ref='searchInput' id="searchBar" bgColor="#FFFFFF" :placeholder="placeholder"
					:clearButton="clearable" :cancelButton="clearable" v-model="content" :focus="true" @input="input"
					@tap="navigate" @confirm="confirm" />
			</uni-col>
			<uni-col :span="3">
				<uni-icons type="camera" size="35" @click="open()" v-if="showCamera"></uni-icons>
				<uni-icons type="search" size="35" @click="confirm" v-else></uni-icons>
			</uni-col>
		</uni-row>
		<uni-popup ref="popup" type="bottom" class="popup" background-color="#fff" maskBackgroundColor="rgba(0,0,0,.8)">
			<uni-row>
				<uni-col :span="12">
					<view class="box" @tap="scanCode">
						<uni-icons type="scan" size="40"></uni-icons>
						<span class="words">扫一扫</span>
					</view>
				</uni-col>
				<uni-col :span="12">
					<view class="box" @tap="chooseImage">
						<uni-icons type="camera" size="40"></uni-icons>
						<span class="words">食物识图</span>
					</view>
				</uni-col>
			</uni-row>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "SearchBar",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: String,
				default: () => {
					return ""
				}
			},
			showCamera: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			clearable: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			placeholder: {
				type: String,
				default: () => {
					return "搜索"
				}
			},

		},
		data() {
			return {
				content: this.value
			}
		},
		onShow() {

		},
		methods: {
			input(e) {
				this.$emit('input', e)
			},
			navigate(e) {
				this.$emit('navigate')
			},
			confirm(e) {
				this.$emit('confirm', e)
			},

			

			
			chooseImage() {
				let en=['Japanese-style-pancake', 'Japanese-tofu-and-vegetable-chowder', 'beef-bowl', 'beef-curry', 'beef-noodle', 'beef-steak', 'bibimbap', 'boiled-chicken-and-vegetables', 'boiled-fish', 'cabbage-roll', 'chicken-n-egg-on-rice', 'chicken-rice', 'chilled-noodle', 'chinese-soup', 'chip-butty', 'cold-tofu', 'croissant', 'croquette', 'cutlet-curry', 'dipping-noodles', 'dried-fish', 'eels-on-rice', 'egg-roll', 'egg-sunny-side-up', 'fermented-soybeans', 'fish-shaped-pancake-with-bean-jam', 'french-fries', 'fried-chicken', 'fried-fish', 'fried-noodle', 'fried-rice', 'fried-shrimp', 'ganmodoki', 'ginger-pork-saute', 'goya-chanpuru', 'gratin', 'green-salad', 'grilled-eggplant', 'grilled-pacific-saury', 'grilled-salmon', 'hambarg-steak', 'hamburger', 'hot-dog', 'jiaozi', 'kinpira-style-sauteed-burdock', 'lightly-roasted-fish', 'macaroni-salad', 'miso-soup', 'mixed-rice', 'nanbanzuke', 'oden', 'omelet', 'omelet-with-fried-rice', 'pilaf', 'pizza', 'pizza-toast', 'pork-cutlet-on-rice', 'pork-miso-soup', 'potage', 'potato-salad', 'raisin-bread', 'ramen-noodle', 'rice', 'rice-ball', 'roast-chicken', 'roll-bread', 'rolled-omelet', 'salmon-meuniere', 'sandwiches', 'sashimi', 'sashimi-bowl', 'sausage', 'sauteed-spinach', 'sauteed-vegetables', 'seasoned-beef-with-potatoes', 'shrimp-with-chill-source', 'simmered-pork', 'sirloin-cutlet', 'soba-noodle', 'spaghetti', 'spaghetti-meat-sauce', 'spicy-chili-flavored-tofu', 'steamed-egg-hotchpotch', 'steamed-meat-dumpling', 'stew', 'stir-fried-beef-and-peppers', 'sukiyaki', 'sushi', 'sushi-bowl', 'sweet-and-sour-pork', 'takoyaki', 'tempura', 'tempura-bowl', 'tempura-udon', 'tensin-noodle', 'teriyaki-grilled-fish', 'toast', 'udon-noodle', 'vegetable-tempura', 'yakitori']
				let ch=["日式煎饼","日式豆腐和蔬菜杂烩","牛丼饭","咖喱牛肉","牛肉面","牛排","石锅拌饭","白切鸡","水煮鱼","白菜卷","蛋包饭","鸡肉	饭","凉面","中国汤","薯条三明治","冻豆腐","牛（羊）角面包","炸丸子（肉饼）","咖喱肉排","泡面","鱼干","鳗鱼饭","蛋卷","荷包蛋","纳豆","豆酱鱼形煎饼","炸薯条","炸鸡","煎鱼","炒面","炒饭","炸虾","油炸豆腐","生姜猪肉烧","炒苦瓜","脆皮烙菜","蔬菜沙拉","烤茄子","烤秋刀鱼","烤三文鱼","汉堡牛排","汉堡包","热狗","饺子","日式金平牛蒡","清淡烤鱼","凉拌空心面","味噌汤","拌饭","南蛮醋渍","关东煮","煎蛋卷","蛋包饭","肉饭","披萨","披萨吐司","猪肉味噌汤汁","浓汤","土豆沙拉","葡萄干面包","拉面","米饭","饭团","烤鸡","面包卷","卷蛋卷","三文鱼","三明治","生鱼片","生鱼缸","香肠","炒菠菜","炒蔬菜","土豆调味牛肉","冷源虾仁","炖猪肉","沙朗肉排","荞麦面","意大利面","意大利面肉酱","辣辣椒味豆腐","蒸鸡蛋杂烩","蒸肉饺子","焖肉","牛肉和辣椒炒","寿司","寿司碗","糖醋猪肉","章鱼丸","天妇罗","天妇罗碗","天妇罗乌冬粉","天妇拉乌冬粉","天妇罗面","日式烤鱼","土司","乌冬面","蔬菜天妇罗粉","烤鸡"]
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: "http://124.220.18.48:5000/photo",
							filePath: res.tempFilePaths[0],
							name: 'image',
							formData: {
								'download_image': false,
							},
							success: (res) => {
								if (res.statusCode == 200) {
									let data = res.data
									if (data!="[]"){
										data=en.findIndex(item => item==data)
										data=ch[data]
										this.content=data
									}
									uni.navigateTo({
										url: "/pages/health/food/results/results?text=" +this.content
									}) 
								} else {
									uni.showToast({
										title: res.data.errorCode,
										icon: 'error',
									})
								}
							},
							fail: (e) => {
								console.log(e)
								uni.showToast({
									title: '发布失败',
									icon: 'error',
								})
							}
						})
					}
				})
			},
			

			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			scanCode() {
				var url = ''
				uni.scanCode({
					success: function(res) {
						console.log(res);
						const scene = decodeURIComponent(res.result)
						console.log(scene)
					},
					fail: function(res) {
						console.log(res)
						uni.showToast({
							title: '扫码失败',
							icon: 'error',
							duration: 2000
						});
					}
				});

			}
		},
		watch: {
			value: {
				handler(newVal, oldVal) { // newVal是获取的是新的值
					this.content = newVal
				},
				deep: true // deep属性是深度监听value对象里的属性的值是否改变。
			}
		}
	}
</script>

<style>
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
